<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no,minimal-ui">
    <title>下拉刷新原型</title>
    <style>
        @-webkit-keyframes bb_animate-rotate {
            0% {
                -webkit-transform: rotate(0);
            }

            100% {
                -webkit-transform: rotate(360deg);
            }
        }

        @keyframes bb_animate-rotate {
            0% {
                transform: rotate(0);
            }

            100% {
                transform: rotate(360deg);
            }
        }

        @-webkit-keyframes bb_animate-load {
            0% {
                opacity:0.2;
            }

            100% {
                opacity:1;
            }
        }

        @keyframes bb_animate-load {
            0% {
                opacity:0.2;
            }

            100% {
                opacity:1;
            }
        }

        .bb_pull{ text-align: center; display: box; display: -webkit-box; display: -moz-box;-webkit-box-pack:center; -moz-box-pack:center; -webkit-box-align:center; -moz-box-align:center;}
        .bb_pull-inner *{ margin: 0; padding: 0; -webkit-box-sizing: content-box; box-sizing: content-box;}
        .bb_pull-inner{ font: 14px/1.42857143 "Lucida Grande",Verdana,"Microsoft YaHei",hei; -webkit-font-smoothing: antialiased; color: #333;}

        .bb_pull-icon{ display: inline-block; vertical-align: middle;}
        .bb_pull-icon_loading{ position: relative; width: 10px; height: 10px; border: 2px solid #009def; border-right-color: transparent; border-radius: 50%;}
        /*.bb_pull-icon_loading:after{ content: ""; position: absolute;  width: 4px; height: 6px; right: -3px; top: 50%; margin-top: -3px; background: #fff;}*/
        .bb_pull-icon_loadFailed{ position: relative; width: 14px; height: 14px;}
        .bb_pull-icon_loadFailed:before,.bb_pull-icon_loadFailed:after{ content: ""; position: absolute; left: 6px; top: 0; width: 2px; height: 14px; background: #ee693b; -webkit-transform: rotate(45deg); transform: rotate(45deg);}
        .bb_pull-icon_loadFailed:after{ -webkit-transform: rotate(135deg); transform: rotate(135deg);}
        .bb_pull-icon_loadSuccess{display: inline-block; width: 12px; height: 6px; vertical-align: -3px; border: 2px solid #13b418; border-width: 0 0 2px 2px; -webkit-transform: translate(0,-5px) rotate(-45deg); transform: translate(0,-5px) rotate(-45deg);}

        .bb_pull-animate_rotate{-webkit-animation: bb_animate-rotate 1s linear 0s infinite; animation: bb_animate-rotate 1s linear 0s infinite;}

        /*ios loading icon*/
        .bb_pull-icon_loading_ios{ position:relative; width: 24px; height: 24px;}
        .bb_pull-icon_loading_ios-line div{position:absolute;left:11px;top:0;width:2px;height:24px;}
        .bb_pull-icon_loading_ios-line div:before,.bb_pull-icon_loading_ios-line div:after{content:"";display:block;height:30%;background:#777;border-radius:5px;}
        .bb_pull-icon_loading_ios-line div:after{ margin-top: 10px;}
        .bb_pull-icon_loading_ios-line div:nth-child(2){-webkit-transform:rotate(30deg);transform:rotate(30deg);}
        .bb_pull-icon_loading_ios-line div:nth-child(3){-webkit-transform:rotate(60deg);transform:rotate(60deg);}
        .bb_pull-icon_loading_ios-line div:nth-child(4){-webkit-transform:rotate(90deg);transform:rotate(90deg);}
        .bb_pull-icon_loading_ios-line div:nth-child(5){-webkit-transform:rotate(120deg);transform:rotate(120deg);}
        .bb_pull-icon_loading_ios-line div:nth-child(6){-webkit-transform:rotate(150deg);transform:rotate(150deg);}

        .bb_pull-icon_loading_ios-line div:nth-child(1):before{-webkit-animation:bb_animate-load 1.2s linear 0s infinite;animation:bb_animate-load 1.2s linear 0s infinite;}
        .bb_pull-icon_loading_ios-line div:nth-child(2):before{-webkit-animation:bb_animate-load 1.2s linear 0.1s infinite;animation:bb_animate-load 1.2s linear 0.1s infinite;}
        .bb_pull-icon_loading_ios-line div:nth-child(3):before{-webkit-animation:bb_animate-load 1.2s linear 0.2s infinite;animation:bb_animate-load 1.2s linear 0.2s infinite;}
        .bb_pull-icon_loading_ios-line div:nth-child(4):before{-webkit-animation:bb_animate-load 1.2s linear 0.3s infinite;animation:bb_animate-load 1.2s linear 0.3s infinite;}
        .bb_pull-icon_loading_ios-line div:nth-child(5):before{-webkit-animation:bb_animate-load 1.2s linear 0.4s infinite;animation:bb_animate-load 1.2s linear 0.4s infinite;}
        .bb_pull-icon_loading_ios-line div:nth-child(6):before{-webkit-animation:bb_animate-load 1.2s linear 0.5s infinite;animation:bb_animate-load 1.2s linear 0.5s infinite;}
        .bb_pull-icon_loading_ios-line div:nth-child(1):after{-webkit-animation:bb_animate-load 1.2s linear 0.6s infinite;animation:bb_animate-load 1.2s linear 0.6s infinite;}
        .bb_pull-icon_loading_ios-line div:nth-child(2):after{-webkit-animation:bb_animate-load 1.2s linear 0.7s infinite;animation:bb_animate-load 1.2s linear 0.7s infinite;}
        .bb_pull-icon_loading_ios-line div:nth-child(3):after{-webkit-animation:bb_animate-load 1.2s linear 0.8s infinite;animation:bb_animate-load 1.2s linear 0.8s infinite;}
        .bb_pull-icon_loading_ios-line div:nth-child(4):after{-webkit-animation:bb_animate-load 1.2s linear 0.9s infinite;animation:bb_animate-load 1.2s linear 0.9s infinite;}
        .bb_pull-icon_loading_ios-line div:nth-child(5):after{-webkit-animation:bb_animate-load 1.2s linear 1s infinite;animation:bb_animate-load 1.2s linear 1s infinite;}
        .bb_pull-icon_loading_ios-line div:nth-child(6):after{-webkit-animation:bb_animate-load 1.2s linear 1.1s infinite;animation:bb_animate-load 1.2s linear 1.1s infinite;}

        .bb_pull-inner{ padding: 5px; }
        .bb_pull-up .bb_pull-inner{ padding: 10px; }
        .bb_pull-icon_loading_ios{ display: inline-block; vertical-align: middle; margin-right: -6px; -webkit-transform: scale(0.75);  transform: scale(0.75);}
        .bb_pull-text{ margin:0 5px; vertical-align: middle; color: #777;}

    </style>
</head>
<body>
    <div class="bb_pull bb_pull-down">
        <div class="bb_pull-inner">
            <i class="bb_pull-icon bb_pull-icon_loading"></i><span class="bb_pull-text">下拉刷新</span>
        </div>
    </div>

    <div class="bb_pull bb_pull-down">
        <div class="bb_pull-inner">
            <i class="bb_pull-icon bb_pull-icon_loading"></i><span class="bb_pull-text">释放刷新</span>
        </div>
    </div>

    <div class="bb_pull bb_pull-down">
        <div class="bb_pull-inner">
            <i class="bb_pull-icon bb_pull-icon_loading bb_pull-animate_rotate"></i><span class="bb_pull-text">刷新中...</span>
        </div>
    </div>

    <div class="bb_pull bb_pull-down">
        <div class="bb_pull-inner">
            <i class="bb_pull-icon bb_pull-icon_loadFailed"></i><span class="bb_pull-text">刷新失败</span>
        </div>
    </div>

    <div class="bb_pull bb_pull-down">
        <div class="bb_pull-inner">
            <i class="bb_pull-icon bb_pull-icon_loadSuccess"></i><span class="bb_pull-text">刷新成功</span>
        </div>
    </div>

    <div class="bb_pull bb_pull-up">
        <div class="bb_pull-inner">
            <div class="bb_pull-icon"></div>
            <span class="bb_pull-text">上拉加载</span>
        </div>
    </div>

    <div class="bb_pull bb_pull-up">
        <div class="bb_pull-inner">
            <div class="bb_pull-icon">
                <div class="bb_pull-icon_loading_ios">
                    <div class="bb_pull-icon_loading_ios-line">
                        <div></div>
                        <div></div>
                        <div></div>
                        <div></div>
                        <div></div>
                        <div></div>
                    </div>
                </div>
            </div>
            <span class="bb_pull-text">正在加载</span>
        </div>
    </div>

    <div class="bb_pull bb_pull-up">
        <div class="bb_pull-inner">
            <div class="bb_pull-icon"></div>
            <span class="bb_pull-text">加载失败，点击重试</span>
        </div>
    </div>

    <div class="bb_pull bb_pull-up">
        <div class="bb_pull-inner">
            <div class="bb_pull-icon"></div>
            <span class="bb_pull-text">已全部加载</span>
        </div>
    </div>

</body>
</html>